<template>
  <div class="database">
    <h1>{{ databaseType }} 数据库管理</h1>
    <div v-if="!isInstalled" class="not-installed">
      <el-alert title="数据库未安装" type="warning" :closable="false">
        <p>{{ databaseType }} 数据库尚未安装。点击下方按钮进行安装。</p>
      </el-alert>
      <el-button type="primary" @click="installDatabase">安装 {{ databaseType }}</el-button>
    </div>
    <div v-else>
      <el-button type="primary" @click="showAddDatabaseDialog" style="margin-bottom: 20px;">添加数据库</el-button>
      <el-table :data="databaseList" style="width: 100%">
        <el-table-column prop="name" label="数据库名称" width="180" />
        <el-table-column prop="size" label="大小" width="120" />
        <el-table-column prop="created" label="创建时间" width="180" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="deleteDatabase(scope.row)">删除</el-button>
            <el-button size="small" @click="changePassword(scope.row)">修改密码</el-button>
            <el-button size="small" @click="importBackup(scope.row)">导入备份</el-button>
            <el-button size="small" @click="showBackupList(scope.row)">查询备份列表</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog v-model="addDatabaseDialogVisible" title="添加数据库" width="30%">
      <el-form :model="newDatabase" label-width="120px">
        <el-form-item label="数据库名称">
          <el-input v-model="newDatabase.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="newDatabase.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="newDatabase.password" type="password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDatabaseDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addDatabase">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'

const route = useRoute()
const databaseType = ref('')
const isInstalled = ref(false)
const databaseList = ref([])
const addDatabaseDialogVisible = ref(false)
const newDatabase = ref({
  name: '',
  username: '',
  password: ''
})

const updateDatabaseType = () => {
  const type = route.params.type
  databaseType.value = type.charAt(0).toUpperCase() + type.slice(1)
  checkInstallation()
}

const checkInstallation = () => {
  // 这里应该调用后端 API 来检查数据库是否已安装
  // 这里我们使用模拟数据
  isInstalled.value = Math.random() > 0.5
  if (isInstalled.value) {
    fetchDatabaseList()
  }
}

const fetchDatabaseList = () => {
  // 这里应该调用后端 API 来获取数据库列表
  // 这里我们使用模拟数据
  databaseList.value = [
    { name: 'db1', size: '1.2GB', created: '2023-05-20 10:00:00' },
    { name: 'db2', size: '0.8GB', created: '2023-05-21 14:30:00' },
    { name: 'db3', size: '2.5GB', created: '2023-05-22 09:15:00' },
  ]
}

const installDatabase = () => {
  ElMessageBox.confirm(
    `确定要安装 ${databaseType.value} 数据库吗？`,
    '安装确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // 这里应该调用后端 API 来安装数据库
      ElMessage.success(`${databaseType.value} 数据库安装成功！`)
      isInstalled.value = true
      fetchDatabaseList()
    })
    .catch(() => {
      ElMessage.info('已取消安装')
    })
}

const showAddDatabaseDialog = () => {
  addDatabaseDialogVisible.value = true
  newDatabase.value = {
    name: '',
    username: '',
    password: ''
  }
}

const addDatabase = () => {
  // 这里应该调用后端 API 来添加数据库
  // 这里我们使用模拟数据
  const newDb = {
    name: newDatabase.value.name,
    size: '0GB',
    created: new Date().toLocaleString()
  }
  databaseList.value.push(newDb)
  ElMessage.success(`数据库 ${newDb.name} 添加成功！`)
  addDatabaseDialogVisible.value = false
}

const deleteDatabase = (row) => {
  ElMessageBox.confirm(
    `确定要删除数据库 ${row.name} 吗？此操作不可逆！`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      // 这里应该调用后端 API 来删除数据库
      ElMessage.success(`数据库 ${row.name} 已成功删除！`)
      databaseList.value = databaseList.value.filter(db => db.name !== row.name)
    })
    .catch(() => {
      ElMessage.info('已取消删除')
    })
}

const changePassword = (row) => {
  ElMessageBox.prompt('请输入新密码', '修改密码', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputType: 'password',
  })
    .then(({ value }) => {
      // 这里应该调用后端 API 来修改密码
      ElMessage.success(`数据库 ${row.name} 的密码已成功修改！`)
    })
    .catch(() => {
      ElMessage.info('已取消修改密码')
    })
}

const importBackup = (row) => {
  // 这里应该实现导入备份的逻辑，可能需要文件上传组件
  ElMessage.info(`导入备份功能待实现：${row.name}`)
}

const showBackupList = (row) => {
  // 这里应该实现显示备份列表的逻辑，可能需要打开一个新的对话框
  ElMessage.info(`查询备份列表功能待实现：${row.name}`)
}

onMounted(() => {
  updateDatabaseType()
})

watch(() => route.params.type, updateDatabaseType)
</script>

<style scoped>
.database {
  padding: 20px;
}

.not-installed {
  margin-top: 20px;
}

.el-button {
  margin-right: 10px;
}
</style>
